<template>
    <div class="RowPage4">
        <div v-if="transportTaskList">
            <card-item :data="cardData1" :flex="5" :min_width="542">
                <div class="map">

                </div>
            </card-item>

            <card-item :data="cardData2" :flex="5" :min_width="542">
                <div class="list">
                    <template>
                        <el-table
                            :data="data"
                            stripe
                            style="width: 100%">
                            <el-table-column
                                prop="id"
                                label="任务编号"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="startAgency"
                                label="起始地"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="endAgency"
                                label="目的地"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="licensePlate"
                                label="车辆"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="任务状态"
                                show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </card-item>
        </div>

        <el-skeleton v-else animated style="width: 100%">
            <template slot="template">
                <el-skeleton-item
                    style="width: 100%; height: 260px; margin: 12px"
                />
            </template>
        </el-skeleton>
    </div>
</template>

<script>
export default {
    name: 'RowPage4',
    props: {
        transportTaskList: true
    },
    data () {
        return {
            cardData1: {
                title: '线路管理'
            },
            cardData2: {
                title: '运输任务',
                btn: '查看更多'
            },
            data: []
        }
    },
    watch: {
        transportTaskList (val) {
            this.data = JSON.parse(JSON.stringify(val)).map(e => {
                if (e.status === 2) e.status = '进行中'
                return e
            })
        }
    }

}
</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}

.RowPage4 {
    > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        overflow: auto;

        .list {
            ::v-deep .el-table {
                border-top: 1px solid #EBEEF5;
                border-left: 1px solid #EBEEF5;
                border-right: 1px solid #EBEEF5;
            }
        }

        ::v-deep .header .right div {
            cursor: pointer;
            transition: all 0.15s;

            &:hover {
                color: #60627A;
            }
        }
    }
}
</style>
